// 运营业绩统计

<template>
    <div class="gradient-content full-width full-height">
        <div :id="idName"></div>
    </div>
</template>

<script>
import { Chart, registerShape } from '@antv/g2'
export default {
    props: {
        idName: {
            type: String,
            default: 'colorChat',
        },
        chartData: {
            type: Array,
            default: () => [],
        },
        axis: {
            type: [Boolean, Object],
            default: true,
        },
        label: {
            type: [String, Boolean],
            default: false,
        },
    },
    watch: {
        chartData(val) {
            this.chart.changeData(val)
        },
    },
    data() {
        return {
            chart: null,
            height: 0,
            width: 0,
        }
    },
    mounted() {
        this.$nextTick(() => {
            const boxContElement = document.querySelector(`.gradient-content`)
            this.height = boxContElement.clientHeight
            this.width = boxContElement.clientWidth

            this.render()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.destroy()
    },
    methods: {
        render() {
             // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
             const sliceNumber = 0.01
            // 自定义 other 的图形，增加两条线
            registerShape('interval', 'slice-shape', {
                draw(cfg, container) {
                    const points = cfg.points
                    let path = []
                    path.push(['M', points[0].x, points[0].y])
                    path.push(['L', points[1].x, points[1].y - sliceNumber])
                    path.push(['L', points[2].x, points[2].y - sliceNumber])
                    path.push(['L', points[3].x, points[3].y])
                    path.push('Z')
                    path = this.parsePath(path)
                    return container.addShape('path', {
                        attrs: {
                            fill: cfg.color,
                            path,
                        },
                    })
                },
            })

            // Step 1: 创建 Chart 对象
            this.chart = new Chart({
                container: this.idName,
                height: this.height,
                autoFit: true,
            })
            this.chart.data(this.chartData);
            this.chart.coordinate('theta', {
                radius: 0.75,
                // innerRadius: 0.7,
            })
            this.chart.tooltip({
                showTitle: false,
                showMarkers: false,
                itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
            })
            this.chart.legend({
                position: 'right',
            })
            // Step 3：创建图形语法，绘制柱状图，由 count 和 name 两个属性决定图形位置，name 映射至 x 轴，count 映射至 y 轴
            this.chart.interval().adjust('stack').position('count').color('name')
            // .shape('slice-shape')

            // Step 4: 渲染图表
            this.chart.render()
        },
    },
}
</script>
